<template>
    <div class="loginbox">
        <div class="loginheader">
            <router-link tag='div' to="/user" class="iconfont icon-jiantou3"></router-link>
            <router-link tag='div' to="/register" class="register">快速注册</router-link>
        </div>
        <div class="login-logo">
            <div></div>
            <div></div>
        </div>
        <div class="login-content">
          <div class="login-ipt">
            <i class="iconfont icon-yonghu"></i>
            <input type="text" class="username" name="username" placeholder="用户名">
          </div>
          <div class="login-ipt">
            <i class="iconfont icon-mima"></i>
            <input type="password" class="password" name="password" placeholder="密码">
          </div>
        </div>
        <div class="login-btn" @click="login">立即登录</div>
    </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import { Field, Button, Toast } from 'mint-ui'
Vue.use(Field, Button)
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  computed: {
  },
  methods: {
    login () {
      axios.post('/taotao/users/login', {
        username: this.username,
        password: this.password
      }).then(data => {
        console.log(data)
        if (data.data === 1) {
          // 登录成功
          Toast('登录成功')
          localStorage.setItem('username', this.username)
          localStorage.setItem('isLogin', 'ok')
          this.$router.push('/')
        } else if (data.data === 2) {
          // 没有该用户
          Toast('没有该用户')
          this.$router.push('/register')
        } else if (data.data === -1) {
          // 密码错误
          Toast('密码错误')
          this.password = ''
        } else {
          // 登录失败
          Toast('登录失败')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.loginbox {
    @include rect(100%, 100%);
    background: url(./../assets/bg4.png) no-repeat;
    background-size:100% 100%;
    background-attachment:fixed;
    // color: #fff
}
.loginheader {
   @include rect(100%, 0.8rem);
   div {
        @include rect(45%, 0.8rem);
        line-height: 0.8rem;
        float: left;
        color: #fff;
        @include margin(0 0 0 0.1rem);
    }
    .register {
      text-align: right;
      font-size: 0.2rem
    }
}
//logo
.login-logo {
    @include rect(1.5rem, 0.6rem);
    @include margin(0.2rem auto);
    color: #fff;
    div {
        @include rect(0.6rem, 0.6rem);
        background: url(./../assets/1.png) no-repeat;
        background-size:100% 100%;
        float: left;
        font-size: 0.3rem;
        line-height: 0.6rem;
        text-align: center;
    }
    div:last-child {
        float: right
    }
}
//登录框
.login-content {
    @include rect(100%, 30%);
    line-height: 0.5rem;
    font-size: 0.2rem;
    text-align: center;
    .login-ipt {
      @include rect(80%, 0.55rem);
      @include margin(10% 10%);
      border-radius: 0.3rem;
      border: 0.01rem #666 solid;
      background: rgba(255,255,255,0.8);
      i {
        @include rect(0.55rem, 0.55rem);
        float: left;
        line-height: 0.52rem;
        font-size: 0.25rem
      }
      input {
          @include rect(80%, 0.55rem);
          background: none;
          border: 0;
          float: right;
      }
      // //placehoder 颜色改变
      // input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
      //     color:#fff
      // }
    }
}
//按钮
.login-btn {
    @include rect(50%, 0.5rem);
    @include margin(0.3rem 25%);
    border-radius: 0.3rem;
    background: rgba(255,255,255,0.8);
    line-height: 0.5rem;
    text-align: center;
    color: #000;
    border: 0.01rem #666 solid
}
</style>
